<template>
  <div class="network-test-container">
    <h1>网络测试</h1>
    <div class="test-section">
      <button @click="testConnection" class="test-button">
        测试后端连接
      </button>
      <div v-if="testResult" class="result">
        {{ testResult }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const testResult = ref('');

const testConnection = async () => {
  try {
    testResult.value = '测试中...';
    const response = await axios.get('/api/health');
    testResult.value = `连接成功: ${response.status} - ${JSON.stringify(response.data)}`;
  } catch (error) {
    testResult.value = `连接失败: ${error}`;
  }
};
</script>

<style scoped>
.network-test-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
}

.test-section {
  margin: 20px 0;
  text-align: center;
}

.test-button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}

.test-button:hover {
  background: #2563eb;
}

.result {
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-family: monospace;
  word-break: break-all;
}
</style>